<template>
  <v-container>
    <v-app id="data-app">
      <v-row justify="center">
        <v-col cols="6">
          <vue-tel-input-vuetify v-model="tel" :preferredCountries="['cn']" :valid-characters-only="true" @input="onInput" :placeholder="$t('u.TELmsg')" label="" defaultCountry="cn" />
        </v-col>
      </v-row>
    </v-app>
  </v-container>
</template>

<script>
export default {
  name: 'Example',
  props: ['removeNumber'],
  data() {
    return {
      tel: '+86 130 1234 5678',
      phone: {
        number: '',
        valid: false,
        country: undefined
      }
    }
  },
  watch: {
    removeNumber(val) {
      this.tel = val
    }
  },
  methods: {
    onInput(formattedNumber, { number, valid, country }) {
      this.phone.number = number.international
      this.phone.valid = valid
      this.phone.country = country && country.name
      this.$emit('phoneNumber', this.phone)
    }
  }
}
</script>

<style lang="less">
.container {
  padding: 0;
  #data-app {
    display: flex;
    justify-content: center;
    height: 39px;
  }
}
.v-application {
  border-radius: 6px;
}
.v-application--wrap {
  width: 93%;
  min-height: 40px;
  height: 100%;
  .col-6 {
    flex: none;
    max-width: 93%;
    padding: 0;
  }
}
.v-text-field > .v-input__control > .v-input__slot:after,
.v-text-field > .v-input__control > .v-input__slot:before {
  width: 0;
}
.v-application .primary--text {
  color: #3d3d3d !important;
}
.v-menu__content {
  position: absolute;
  width: 100%;
  max-width: 100%;
  margin-top: 2em;
  border-radius: 6px;
  box-shadow: 0px 1px 9px 0px rgba(0, 0, 0, 0.2);
}
.v-application .primary--text {
  caret-color: #3d3d3d !important;
}
</style>
